Page({

  data: {
    userInfo: {
      nickName: '',
      avatar: ''
    }
  },

  onLoad() {

  },
  getNickname(e) {
    // 输入框失去焦点的时候，发请求，。如果是选择用户昵称的时候
    // 这个模拟器会有问题，发的请求获取不到我们的昵称，需要使用真机，
    // 扫码我们的 真机调试的 二维码，在手机上操作才是正常的
    this.updateNickname(e.detail.value)
  },
  async updateNickname(nickName) {
    const res = await wx.$http.put('/userInfo', {
      nickName
    })
    if (res.code !== 10000) return wx.$utils.toast()

    this.setData({
      'userInfo.nickName': nickName
    })
  },
  // 头像部分， 监听页面的回调函数， 每个函数一定要保证功能唯一
  getAvatar(e) {
    console.log(e.detail.avatarUrl);
    this.uploadAvatar(e.detail.avatarUrl)

    // web端  人资里面上传头像
    // const form = new FormData()
    // form.append('file', file)
    // axios.post('/xxx', form)
  },
  // 上传的功能是一个单独的函数
  uploadAvatar(filePath) {
    console.log(1, this);
    // wx.$http.post() 这个是我们自己封装的， 下面的wx.uploadFile是小程序的
    wx.uploadFile({
      url: wx.$http.baseURL + '/upload',
      filePath,
      name: 'file',
      formData: {
        'type': 'avatar'
      },
      header: {
        Authorization: getApp().token
      },
      // 官网的代码都是回调函数 function的写法，而我们函数里面需要使用this，所有要改为箭头函数的写法
      // success(res) {
      success: (res) => {
        console.log(2, this);
        console.log(res.data);
        // 这个上传接口返回的内容不是一个json，是一个json字符串
        const tmp = JSON.parse(res.data)
        console.log(tmp);
        // this 函数调用的时候 动态产生的一个变量， 可以变化
        this.setData({
          'userInfo.avatar': tmp.data.url
        })
      }
    })
  }
})